<template>
  <div class="bank-card-bind-wrap-success">

    <div class="process-box">
      <img src="./progress04.png" class="process1" onclick="return false"/>
    </div>

    <div class="line-box"></div>

    <div class="success-box">
      <img src="../../../images/successful.png" class="pic"/>
      <span class="suc-text">银行卡绑定成功</span>
    </div>

    <button class="sure-text" type="button" @click="backPage">确&nbsp;定</button>

  </div>
</template>

<script>
  export default {
    methods: {
      backPage() {
        this.$router.push("/mine");
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .bank-card-bind-wrap-success {
    .wh(100%, 100%);
    background: #FFF;
    .process-box {
      .wh(100%, 2.4rem);
      .process1 {
        .wh(100%, 100%);
      }
    }
    .sure-text {
      .fj(center, center);
      margin: 0 auto;
      .wh(9.04rem, 1.333rem);
      background: rgba(60, 175, 255, 1);
      border-radius: 0.107rem;
      .size-color(0.48rem, rgba(255, 255, 255, 1));
    }
    .line-box {
      .wh(100%, 0.267rem);
      background: @talent-theme-bg-color;
    }
    .success-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      .pic {
        padding-top: 0.933rem;
        padding-bottom: 0.8rem;
        .wh(1.6rem, 1.6rem);
      }
      .suc-text {
        padding-bottom: 1.2rem;
        .size-color(0.427rem, rgba(51, 51, 51, 1));
      }
    }
  }
</style>
